/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  ScrollView,
  Text,
  Image,
  TextInput,
  ListView,
  View
} from 'react-native';

export default class MeiTuan extends Component {
  render() {
    return (
        <ScrollView>
            <View style={styles.box}>

                {/*搜索条*/}
                <View style={styles.search}>
                    <View style={styles.subsearch}>
                        {/*<Text>北京﹀</Text>*/}
                        {/*<TextInput style = {styles.input}*/}
                                   {/*placeholder  = {"输入商家/商品/商圈"}*/}
                                   {/*placeholderTextColor ={'#f0f0f0'}*/}
                        {/*/>*/}
                        {/*<Text>-_-</Text>*/}
                        {/*<Text>我的</Text>*/}
                    </View>
                </View>

                {/*导航块*/}
                <View style={styles.nav}>
                    <View style={styles.subnav}>
                        <View style={styles.icon}>
                            <Image style={styles.img} source={require("./img/food.png")}/>
                            <Text style={styles.text}>美食</Text>
                        </View>
                        <View style={styles.icon}>
                            <Image style={styles.img} source={require("./img/moive.png")}/>
                            <Text style={styles.text}>电影</Text>
                        </View>
                        <View style={styles.icon}>
                            <Image style={styles.img} source={require("./img/hotel.png")}/>
                            <Text style={styles.text}>酒店</Text>
                        </View>
                        <View style={styles.icon}>
                            <Image style={styles.img} source={require("./img/maintain.png")}/>
                            <Text style={styles.text}>休闲娱乐</Text>
                        </View>
                        <View style={styles.icon}>
                            <Image style={styles.img} source={require("./img/waimai.png")}/>
                            <Text style={styles.text}>外卖</Text>
                        </View>
                    </View>
                    <View style={styles.subnav}>
                        <View style={styles.icon}>
                            <Image style={styles.img} source={require("./img/KTV.png")}/>
                            <Text style={styles.text}>KTV</Text>
                        </View>
                        <View style={styles.icon}>
                            <Image style={styles.img} source={require("./img/moutain.png")}/>
                            <Text style={styles.text}>周边游</Text>
                        </View>
                        <View style={styles.icon}>
                            <Image style={styles.img} source={require("./img/beauty.png")}/>
                            <Text style={styles.text}>丽人</Text>
                        </View>
                        <View style={styles.icon}>
                            <Image style={styles.img} source={require("./img/fastfood.png")}/>
                            <Text style={styles.text}>小吃快餐</Text>
                        </View>
                        <View style={styles.icon}>
                            <Image style={styles.img} source={require("./img/train.png")}/>
                            <Text style={styles.text}>机票/火车</Text>
                        </View>
                    </View>
                </View>

                {/*优惠活动块*/}
                <View style={styles.discount}>
                    <View style={styles.discountLeft}>
                        <Image />
                        <Text>3.1</Text>
                    </View>
                    <View style={styles.discountRight}>
                        <View style={styles.rightTop}>
                            <Image />
                            <Text>3.2</Text>
                        </View>
                        <View style={styles.rightBottom}>
                            <View style={styles.rightBottomLeft}>
                                <Image />
                                <Text>3.3</Text>
                            </View>
                            <View style={styles.rightBottomRight}>
                                <Image />
                                <Text>3.4</Text>
                            </View>
                        </View>
                    </View>
                </View>

                {/*猜你喜欢*/}
                <View style={styles.list}>
                    {/*<ListView/>*/}
                </View>
            </View>
        </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
    box: {
        backgroundColor: '#f0efed',
    },
    search: {
        height: 51.5,
        backgroundColor: '#06c1ae',
        borderBottomWidth: 1,
        borderBottomColor: '#21897d',
    },
    subsearch: {
        flexDirection: "row",
        width:50,
    },
    input: {
        fontSize: 20,
        borderWidth: 2,
        borderColor: 'gray',
    },

    nav: {
        paddingTop: 10,
        paddingBottom: 10,
        backgroundColor: '#fff',
    },
    subnav: {
        flexDirection: "row",
        paddingBottom: 15,
    },
    icon: {
        flex: 1,
    },
    img: {
        alignSelf: "center",
    },
    text: {
        alignSelf: "center",
    },

    discount: {
        height: 160,
        backgroundColor: '#fff',
        marginVertical: 10,
        flexDirection: "row",
    },
    discountLeft: {
        flex: 1,
        borderRightColor: 'gray',
        backgroundColor: "blue",
    },
    discountRight: {
        flex: 2,
        borderRightWidth: 2,
        borderRightColor: 'black',
    },
    rightTop: {
        flex: 1,
        backgroundColor: "red",
    },
    rightBottom: {
        flex: 1,
        flexDirection: "row",
    },
    rightBottomLeft: {
        flex: 1,
        backgroundColor: "yellow",
    },
    rightBottomRight: {
        flex: 1,
        backgroundColor: "green",
    },

    list: {
        height: 2000,
        backgroundColor: '#fff',
    }
});

AppRegistry.registerComponent('MeiTuan', () => MeiTuan);
